<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>colorpicker</title>
    <link rel="stylesheet" href="../0.src/bootstrap-3.3.7.css">
    <link rel="stylesheet" href="src/css/colorpicker.css">
    <script src="../0.src/angular-1.4.6.min.js"></script>
    <script src="src/js/bootstrap-colorpicker-module.js"></script>

</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">

        <br>

        <br>
        <div> 十六进制颜色</div>
        <input colorpicker="hex" type="text" ng-style="{'color': color1}" ng-model="color1" colorpicker-with-input="true">
        <span>color: {{color1}}</span>
        <hr>

        <div> rgb颜色</div>
        <input colorpicker="rgb" type="text" ng-style="{'color': color2}" ng-model="color2" colorpicker-with-input="true">
        <span>color: {{color2}}</span>
        <hr>

        <div> rgba颜色</div>
        <input colorpicker="rgba" type="text" ng-style="{'color': color3}" ng-model="color3" colorpicker-with-input="true">
        <span>color: {{color3}}</span>

    </div>
    <script>
    var app = angular.module('myApp', ['colorpicker.module']);
    app.controller('myCtrl', ['$scope', function($scope) {
        // ...
        $scope.color1 = '#333';
        $scope.color2 = '#333';
        $scope.color3 = '#333';

        /**
         *
         * 地址：https://github.com/buberdds/angular-bootstrap-colorpicker
         * 几个属性说明
         *  colorpicker的值：hex（默认），rgb, rgba； 三种颜色格式
         *  colorpicker-with-input的值：布尔值； 表示是否显示输入框，默认不显示
         *  colorpicker-position的值：right， left；
         *
         */

    }]);


    </script>
</body>

</html>